import React from 'react';
import { Table, Select, Input, Button, Tag, Space, message } from 'antd';
import { Coupon, CouponListFilters } from '@/types/coupon';

interface CouponListProps {
  data: Coupon[];
  loading: boolean;
  filters: CouponListFilters;
  onFilterChange: (filters: CouponListFilters) => void;
  onView: (coupon: Coupon) => void;
  onDisable: (code: string) => void;
  onExport: () => void;
}

const CouponList: React.FC<CouponListProps> = ({
  data,
  loading,
  filters,
  onFilterChange,
  onView,
  onDisable,
  onExport
}) => {
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '优惠券名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '优惠码',
      dataIndex: 'code',
      key: 'code',
      render: (code: string) => (
        <span 
          className="copy-tooltip cursor-pointer"
          onClick={() => {
            navigator.clipboard.writeText(code);
            message.success('复制成功');
          }}
        >
          {code}
          <span className="tooltip-text">点击复制</span>
        </span>
      ),
    },
    {
      title: '优惠额度',
      dataIndex: 'value',
      key: 'value',
    },
    {
      title: '有效期至',
      dataIndex: 'expiry',
      key: 'expiry',
    },
    {
      title: '适用产品',
      dataIndex: 'products',
      key: 'products',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const statusMap = {
          valid: { color: 'success', text: '有效' },
          used: { color: 'warning', text: '已使用' },
          expired: { color: 'error', text: '已过期' }
        };
        const { color, text } = statusMap[status as keyof typeof statusMap];
        return <Tag color={color}>{text}</Tag>;
      },
    },
    {
      title: '使用人/生成人',
      key: 'user',
      render: (record: Coupon) => (
        <div>
          {record.status === 'used' && record.userPhone && (
            <div>
              <small className="text-gray-700">手机：{record.userPhone}</small>
              <br />
            </div>
          )}
          <small className="text-gray-500">由 {record.admin} 生成</small>
        </div>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (record: Coupon) => (
        <Space>
          <Button 
            type="link" 
            onClick={() => onView(record)}
          >
            查看
          </Button>
          <Button 
            type="link" 
            danger
            disabled={record.status !== 'valid'}
            onClick={() => onDisable(record.code)}
          >
            禁用
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <div className="flex justify-between items-center mb-4">
        <Space>
          <Select
            value={filters.status}
            onChange={(value) => onFilterChange({ ...filters, status: value })}
            style={{ width: 120 }}
          >
            <Select.Option value="all">所有状态</Select.Option>
            <Select.Option value="active">有效</Select.Option>
            <Select.Option value="used">已使用</Select.Option>
            <Select.Option value="expired">已过期</Select.Option>
          </Select>
          <Input
            placeholder="搜索优惠券..."
            value={filters.searchText}
            onChange={(e) => onFilterChange({ ...filters, searchText: e.target.value })}
            style={{ width: 200 }}
          />
        </Space>
        <Button type="primary" onClick={onExport}>
          导出Excel
        </Button>
      </div>

      <Table
        columns={columns}
        dataSource={data}
        loading={loading}
        rowKey="id"
        pagination={{
          current: filters.page,
          pageSize: filters.pageSize,
          total: data.length,
          onChange: (page, pageSize) => 
            onFilterChange({ ...filters, page, pageSize })
        }}
      />
    </div>
  );
};

export default CouponList; 